<template>
  <div id="bbb" style="margin-top: 0.3rem;">
    <div id="vm" class="pubu" v-cloak>
      <ul id="show" class="yg yg_l"> 
        <li v-for="(item,index) in list" :key="index">
          <div style="position: relative;" >
            <img :src="item.source != 'unsplash' ? item.imageUrl: item.thumbLargeUrl" alt="" mode="widthFix" @click="goDetail(item)">
            <div class="u_xinx">
              <!-- <img :src="item.imageUrl" alt=""> -->
              <!-- <span>{{item.colum}}</span> -->
            </div>
          </div>
          <p>{{item.abs || item.desc || item.colum || item.date || '---'}}<img @click="deleteItem(item.id)" style="width: 1.0rem;height: 1rem;float: right;margin-right: 0.5rem;" src="../../../static/img/common/empty_fill_cd.png"></p>
        </li>
      </ul>
      <!-- <ul class="yg yg_r">
        <li v-for="(item,index) in list" :key="index" v-if="index%2==1" >
          <div style="position: relative;">
            <img :src="item.thumbLargeUrl" alt="" mode="widthFix" @click="goDetail(item)">
            <div class="u_xinx">
            </div>
          </div>
          <p>{{item.abs || item.desc || item.colum || item.date || '---'}}<img @click="deleteItem(item.id)" style="width: 1.0rem;height: 1rem;float: right;margin-right: 0.5rem;" src="../../static/img/common/empty_fill_cd.png"></p>
        </li>
      </ul> -->
      <div style="clear: both;"></div>
	  <div v-show="!cacheData" v-for="(item,index) in cacheData" :key="index">
		  <img :src="item.thumbLargeUrl">
	  </div>
    </div>
  </div>
</template>

<script>
	var url = 'https://bukaa.cn/api-cms/baidu/image/find';
	export default {
		data() {
			return {
				refreshing: false,
				list: [],
				fetchPageNum: 1,
				requestParam:{},
				cacheData:[],
			}
		},
		onLoad() {
			this.getData();
			uni.getProvider({
				service: "share",
				success: (e) => {
					let data = [];
					for (let i = 0; i < e.provider.length; i++) {
						switch (e.provider[i]) {
							case 'weixin':
								data.push({
									name: '分享到微信好友',
									id: 'weixin'
								})
								data.push({
									name: '分享到微信朋友圈',
									id: 'weixin',
									type: 'WXSenceTimeline'
								})
								break;
							case 'qq':
								data.push({
									name: '分享到QQ',
									id: 'qq'
								})
								break;
							default:
								break;
						}
					}
					this.providerList = data;
				},
				fail: (e) => {
					console.log("获取登录通道失败", e);
				}
			});
		},
		onPullDownRefresh() {
			console.log("下拉刷新");
			this.refreshing = true;
			this.getData();
		},
		onReachBottom() {
			if(this.cacheData && this.cacheData.length >0){
				this.list = this.list.concat(this.cacheData);
				this.cacheData = [];
				this.loadNextPage(++this.fetchPageNum);
				return;
			}
			this.getData();
		},
		methods: {
			getData() {
				if(!this.refreshing)
					uni.showLoading({title:"loading..."})
				var that = this;
				that.requestParam.page = this.refreshing ? 1 : this.fetchPageNum;
				uni.request({
					url: url,
					data:this.requestParam,
					success: (ret) => {
						var data = ret.data;
						if (data.status === 'ok') {
							var feeds = data.data.list;
							if (feeds && feeds.length > 0) { // 如果有返回数据
								if (that.refreshing) {
									that.list = feeds;
									that.refreshing = false;
									uni.stopPullDownRefresh();
									uni.hideLoading();
									that.fetchPageNum = 2;
								} else {
									that.list = that.list.concat(feeds);
									that.fetchPageNum += 1;
								}
								that.loadNextPage(that.fetchPageNum);
							} else {
								//self.setData({ loading: false });
							}
						}
					},
					complete() {
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				});
			},
			loadNextPage: function(page){
				var that = this;
				uni.request({
					url: url,
					data: {page: page},
					success: (ret) => {
						var data = ret.data;
						if (data.status === 'ok') {
							var feeds = data.data.list;
							if (feeds && feeds.length > 0) { // 如果有返回数据
								//异步加载下一页数据，存入临时数据
								that.cacheData = feeds;
							}
						}
					}
				});
			},
			deleteItem:function(id){
				var that = this;
				var url = 'https://bukaa.cn/api-cms/baidu/image/delete/'+id;
				uni.request({
					url: url,
					success: (ret) => {
						var data = ret.data;
						if (data.status === 'ok') {
							that.list.removeById(id);
						}
					}
				});
			},
			goDetail(e) {
				uni.navigateTo({
					url:"detail/detail?query=" + encodeURIComponent(JSON.stringify(e))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
  [v-cloak]{
    display: none!important;
  }
  *{
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  body{
    width: 95%;
    margin: 10px auto;
  }
  .pubu{
    width: calc(100% - 36px);
    margin-left: 20px;
  }
  .yg img{
    width:100%;
    border-radius: 8px 8px 0 0;
  }
  .yg p{
    width: 100%;
    font-size: 0.75rem;
    padding:3px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #999;
  }
  .yg_l , .yg_r{
    width: calc(100% - 5px);
  }
  .yg li{
    background: #fff;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 0 5px #999;
  }
  .yg_l{
    float: left;
  }
  .yg_r{
    float: right;
  }
  .u_xinx{
    position: absolute;
    bottom: 4px;
  }
  .u_xinx img{
    margin-left: 5px;
    background: rgba(0,0,0,.2);
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-block;
  }
  .u_xinx span{
    position: relative;
    text-shadow: 0 1px 1px #333;
    top: -8px;
    color: #fff;
    font-size: 0.6rem;
  }
</style>
